<script setup>
import { useBlogCategory, useBlogType } from '@vuepress/plugin-blog/client'
import VPNavbar from '@vuepress/theme-default/lib/client/components/VPNavbar.vue'
import VPHomeFooter from '@vuepress/theme-default/lib/client/components/VPHomeFooter.vue'
import { useRoutePath } from 'vuepress/client'
import ArticleList from '../components/ArticleList.vue'

const tagMap = useBlogCategory('tag')
const articleList = useBlogType('article')
const routePath = useRoutePath()
</script>

<template>
  <main class="vp-home">
    <VPNavbar />
    <div class="content-wrapper">
      <div class="article-column">
<!--        <ArticleList :items="articleList.items" />-->
      </div>
      <div class="tag-column">
        <h2 class="tag-title">TAGS</h2>
        <div class="tag-list card">
          <a
            v-for="({ items, path }, name) in tagMap.map"
            :key="name"
            :href="path"
            :class="{ 'active': routePath === path }"
            class="tag"
          >
            {{ name }}
            <span class="tag-num">
              {{ items.length }}
            </span>
          </a>
        </div>
      </div>
    </div>
    <VPHomeFooter />
  </main>
</template>

<style lang="scss">
@use '@vuepress/theme-default/styles/mixins';

.content-wrapper {
  display: flex;
  padding-top: calc(var(--navbar-height) + 1rem);
  @include mixins.content-wrapper;

  .article-column {
    flex: 2;
    margin-right: 2rem;

    @media (max-width: 719px) {
      margin-right: 0;
    }
  }
}

.tag-list {
  position: sticky;
  top: calc(var(--navbar-height) + 1rem);

  .tag {
    display: block;
    margin: 0.3rem 0;
    padding: 0.4rem 0.8rem;
    cursor: pointer;

    .tag-num {
      display: inline-block;

      min-width: 1rem;
      height: 1.2rem;
      margin-inline-start: 0.2em;
      padding: 0 0.1rem;
      border-radius: 0.6rem;

      font-size: 0.7rem;
      line-height: 1.2rem;
      text-align: center;
    }

    &.active {
      background: var(--vp-c-accent-bg);
      color: var(--vp-c-accent-text);

      .tag-num {
        color: var(--vp-c-accent-text);
      }
    }
  }
}
</style>
